<template>
  <div>
    <!--     
  <el-header style="padding:0;height: 56px;">
    <headbox ref="mychild"></headbox>
  </el-header>
      
    <el-aside  style="width:200px;background-color:#393D49;">
       <left></left>
    </el-aside>
        
      <el-main style="padding:0;"> -->
    <!-- 放置内容区 -->
    <div class="contbox6_10" v-if="type == 1">
      <!-- 机构列表 -->
      <p class="titlelist6_10">
        数据统计<span style="color: #999;">&nbsp;&nbsp;/&nbsp;&nbsp;</span
        >终端统计
      </p>
      <div class="sousuojg6_10">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="归属机构" style="float: left;">
            <el-input
              v-model="officeName"
              @focus="selectInstitution"
              style="width: 200px;margin-right: 40px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="机构名称" style="float: left;">
            <el-input
              v-model="form.officeName"
              style="width: 200px;margin-right: 40px;"
            ></el-input>
          </el-form-item>
          <!--    <el-form-item label="机构电话" style="float: left;">
                 <el-input v-model="form.phone" style="width: 200px;margin-right: 40px;"></el-input>
               </el-form-item>
                  <el-form-item label="机构类型" style="float: left;margin-right: 40px;">
                    <el-select v-model="form.agtType" placeholder="请选择机构类型">
                      <el-option label="OEM代理" value="0"></el-option>
                      <el-option label="普通代理" value="1"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="角色筛选" style="width: 100%;float: left;margin-right: 40px;">
                      <el-radio-group v-model="form.radio">
                            <el-radio-button label="个人"></el-radio-button>
                            <el-radio-button label="团队"></el-radio-button>
                     </el-radio-group>
                  </el-form-item>-->
          <el-form-item
            label="状态"
            style="width: 100%;float: left;margin-right: 40px;"
          >
            <el-radio-group v-model="status">
              <el-radio-button label="全部"></el-radio-button>
              <el-radio-button label="激活"></el-radio-button>
              <el-radio-button label="开通"></el-radio-button>
              <el-radio-button label="达标"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="数量" style="width: 100%;float: left;margin-right: 40px;">
                      <el-radio-group v-model="form.radio2">
                            <el-radio-button label="新增"></el-radio-button>
                            <el-radio-button label="累计"></el-radio-button>
                     </el-radio-group>
                  </el-form-item> -->

          <el-form-item
            label="交易时间"
            style="float: left;margin-right: 40px;"
          >
            <el-col :span="9">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择开始日期"
                v-model="form.startDate"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="1" style="text-align: center;"
              >-</el-col
            >
            <!-- <el-col :span="9">
                      <el-time-picker placeholder="选择时间" v-model="form.EndDate" style="width: 100%;"></el-time-picker>
                    </el-col> -->
            <el-date-picker
              v-model="form.endDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择结束时间"
              style="width: 40%;"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="终端总数"
            style="width: 100%;float: left;font-weight: bold;margin-right: 40px;"
          >
            <span>{{ terminalSumNum }}</span>
          </el-form-item>

          <el-form-item
            style="float: right;margin-right: 20px;    margin-top: -60px;text-align: right;"
          >
            <el-button type="primary" @click="onSubmit" icon="el-icon-search"
              >搜索</el-button
            >
            <el-button type="primary" @click="result" icon="el-icon-search"
              >重置</el-button
            >
            <!-- <el-button>取消</el-button> -->
          </el-form-item>
        </el-form>
      </div>
      <p
        class="titlelist6_10"
        style="margin-bottom: 10px;    line-height: 45px;"
      >
        终端列表
      </p>
      <div
        style="width: 100%;float: left;border-bottom: 1px solid #eee;margin-bottom: 30px;"
      ></div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        border
        :header-cell-style="{ background: '#DCDCDC', color: '#222' }"
        style="width: 98%;margin-bottom: 30px;margin-left: 2%;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="officeUid" label="机构ID">
          <!-- <template slot-scope="scope">{{ scope.row.uid }}</template> -->
        </el-table-column>
        <!-- <el-table-column
                prop="agtType"
                label="机构类型"
                width="300">
              </el-table-column> -->
        <el-table-column prop="officeName" label="机构名称"> </el-table-column>
        <!--         <el-table-column
        prop="phone"
        label="手机号"
         width="300">
                     </el-table-column> -->
        <el-table-column prop="terminalNum" label="终端总数"> </el-table-column>
      </el-table>

      <div style="clear: both;"></div>
      <el-pagination
        style="text-align: right;"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="form.number"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
      >
      </el-pagination>
    </div>

    <!--  </el-main>
      <el-footer style="padding:0;">
        <footerbox></footerbox>
      </el-footer>
    </el-container>
  </el-container>
</el-container> -->
    <Tree :showType="showType" @func="transmit" />
  </div>
</template>

<script>
//   import left from './left.vue'
//   import footerbox from './footer.vue'
//   import headbox from './head.vue'
import Tree from "../tree/index";
export default {
  name: "route",
  data() {
    return {
      terminalSumNum: "",
      type: 1,
      currentPage: 1, //默认显示第一页
      pageSize: 1, //默认每页显示10条
      totalNum: 0, //总页数
      msg: [],
      status: "全部",
      showType: false,
      officeName: "",
      form: {
        officeCode: "",
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : "", //OEMid
        officeUid: localStorage.getItem("uid"),
        officeName: "",
        parentUid: "",
        type: 0,
        startDate: "",
        endDate: "",
        page: 1,
        number: 10
      },
      tableData: [],
      multipleSelection: []
      // urltype:this.GLOBAL.httpurl,
    };
  },
  // 页面初始化
  mounted: function() {
    window.scrollTo(0, 0);
    var _this = this;
    //  document.title = '终端统计';
    _this.list(1);
  },
  components: {
    Tree
  },
  methods: {
    //这里开始
    transmit(data) {
      console.log(data.uid);
      //归属机构的uid
      this.form.officeCode = data.uid;
      // console.log(this.form.officeUid);
      //归属机构名字
      this.officeName = data.name;
      // this.form.officeUid = data.uid;
    },
    //设置取消的
    determine() {
      // alert("执行")
      this.showType = false;
    },

    selectInstitution() {
      this.showType = true;
    },
    //这里结束

    //重置
    result() {
      this.officeName = "";
      this.form.officeCode = "";
      this.form.officeName = "";
      this.form.startDate = "";
      this.form.endDate = "";
    },

    // 搜索
    onSubmit() {
      this.list(2);
    },
    // 列表
    list(n) {
      var _this = this;
      if (n != 1) {
        _this.form.type =
          _this.status == "全部"
            ? 0
            : _this.status == "激活"
            ? 1
            : _this.status == "开通"
            ? 2
            : 3;
      }

      _this
        .axios({
          //axios请求
          method: "post",
          url: "/api/dataStatistics/getTerminalStatistics",
          data: _this.form
        })
        .then(function(d) {
          if (d.data.code == "0000") {
            _this.tableData = d.data.data;

            _this.totalNum = d.data.total;
            _this.terminalSumNum = d.data.terminalSumNum;
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
          }
        })
        .catch(function(error) {
          //axios请求失败回调
          console.log(error);
        });
    },
    // 条数改变
    handleSizeChange(val) {
      this.form.number = val; //动态改变
      this.list(2);
    },
    // 页码改变
    handleCurrentChange(val) {
      /* alert(`当前页: ${val}`);*/

      this.form.page = val; //动态改变
      this.list(2);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    showdou() {
      this.$refs.mychild.parentHandleclick();
    }
  }
};
</script>

<style scoped>
/* 单独样式 */
.contbox6_10 {
  width: 96%;
  margin-left: 2%;
  /* height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.titlelist6_10 {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #222;
  margin-top: 40px;
}
.sousuojg6_10 {
  float: left;
  font-size: 16px;
  color: #222;
  box-sizing: border-box;
  background-color: #f6f6f6;
  margin-top: 20px;
  border-radius: 5px;
}
</style>
